<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<meta name="viewport" content="width=device-width, user-scalable=no,
		 initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
		<title></title>
		<!-- <link rel="stylesheet" type="text/css" href="css/normalize.css"/> -->
		<link rel="stylesheet" type="text/css" href="./css/style.css"/>
		<link rel="stylesheet" type="text/css" href="iconfont/iconfont.css"/>
		<script src="js/flexible.js" type="text/javascript" charset="utf-8"></script>
	</head>
	<body>
	<header>
		<ul class="table">
			<li ><h4>话题</h4><span class="items" style="display: block;"></span></li>
			<li><h4>关注</h4><span class="items"></span></li>
		</ul>
	</header>
		<div class="tab_main">
			<div class="item container" style="display: block;">
				<a href="../课程详情和课程参数/index.html">
					<div class="to1">
						<div class="to1_header">
							<div class="to1_header_left">
								<figure>
									<span><img src="img/touxiang11.png" ></span>
									<h4>攻城狮圈子</h4>
								</figure>
							</div>
							
							<div class="to1_header_right">
								<figure>
									<h4>+ 关注</h4>
									<span></span>
								</figure>
							</div>
						</div>
						<div class="to1_body">
							<div class="to1_body_left">
								<div class="to1_body_left_top">
									论互联网的加班浪潮，对于零零七和九九六你有什么看法？省略一万字省略一万字省略一万字省略一万字省略一万字省略一万字省略一万字省略一万字省略一万字省略一万字
								</div>
								<div class="to1_body_left_bottom">
									某某描述年轻人可能会更多选择高薪省略一万字省略一万字省略一万字省略一万字
								</div>
							</div>
							<div class="to1_body_right"><img src="img/course2.png" ></div>
						</div>
					</div>
				</a>
				<div class="to1">
					<div class="to1_header">
						<div class="to1_header_left">
							<figure>
								<span><img src="img/touxiang2.png" ></span>
								<h4>成功法则</h4>
							</figure>
						</div>
						
						<div class="to1_header_right">
							<figure>
								<h4>+ 关注</h4>
								<span></span>
							</figure>
						</div>
					</div>
					<div class="to1_body">
						<div class="to1_body_left">
							<div class="to1_body_left_top">
								怎么样才能月薪上万，走向成功，达到“睡后”收入实现不上班愿望？
							</div>
							<div class="to1_body_left_bottom">
								首先要学会理财，积攒第一笔启动资金才有有有有
							</div>
						</div>
						<div class="to1_body_right"><img src="img/course1.png" ></div>
					</div>
				</div>
				<div class="to1">
					<div class="to1_header">
						<div class="to1_header_left">
							<figure>
								<span><img src="img/touxiang2.png" ></span>
								<h4>爱美人人需要</h4>
							</figure>
						</div>
						
						<div class="to1_header_right">
							<figure>
								<h4></h4>
								<span></span>
							</figure>
						</div>
					</div>
					<div class="to1_body">
						<img src="img/shipin.png" alt="">
					</div>
					<p>每天进行10分钟按摩保证一整天精神</p>
				</div>
				<div class="to1">
					<div class="to1_header">
						<div class="to1_header_left">
							<figure>
								<span><img src="img/touxiang2.png" ></span>
								<h4>成功法则</h4>
							</figure>
						</div>
						
						<div class="to1_header_right">
							<figure>
								<h4>+ 关注</h4>
								<span></span>
							</figure>
						</div>
					</div>
					<div class="to1_body">
						<div class="to1_body_left">
							<div class="to1_body_left_top">
								怎么样才能月薪上万，走向成功，达到“睡后”收入实现不上班愿望？
							</div>
							<div class="to1_body_left_bottom">
								首先要学会理财，积攒第一笔启动资金才有有有有
							</div>
						</div>
						<div class="to1_body_right"><img src="img/course1.png" ></div>
					</div>
				</div>
				<div class="to1">
					<div class="to1_header">
						<div class="to1_header_left">
							<figure>
								<span><img src="img/touxiang2.png" ></span>
								<h4>成功法则</h4>
							</figure>
						</div>
						
						<div class="to1_header_right">
							<figure>
								<h4>+ 关注</h4>
								<span></span>
							</figure>
						</div>
					</div>
					<div class="to1_body">
						<div class="to1_body_left">
							<div class="to1_body_left_top">
								怎么样才能月薪上万，走向成功，达到“睡后”收入实现不上班愿望？
							</div>
							<div class="to1_body_left_bottom">
								首先要学会理财，积攒第一笔启动资金才有有有有
							</div>
						</div>
						<div class="to1_body_right"><img src="img/course3.png" ></div>
					</div>
				</div>
				<div class="to1">
				<div class="to1_header">
					<div class="to1_header_left">
						<figure>
							<span><img src="img/touxiang2.png" ></span>
							<h4>成功法则</h4>
						</figure>
					</div>
					
					<div class="to1_header_right">
						<figure>
							<h4>+ 关注</h4>
							<span></span>
						</figure>
					</div>
				</div>
				<div class="to1_body">
					<div class="to1_body_left">
						<div class="to1_body_left_top">
							怎么样才能月薪上万，走向成功，达到“睡后”收入实现不上班愿望？
						</div>
						<div class="to1_body_left_bottom">
							首先要学会理财，积攒第一笔启动资金才有有有有
						</div>
					</div>
					<div class="to1_body_right"><img src="img/course4.png" ></div>
				</div>
			</div>
			</div>
			<div class="item container">
				<div class="to1">
					<div class="to1_header">
						<div class="to1_header_left">
							<figure>
								<span><img src="img/touxiang11.png" ></span>
								<h4>攻城狮圈子</h4>
							</figure>
						</div>
						
						<div class="to1_header_right">
							<figure>
								<h4>+ 关注</h4>
								<span></span>
							</figure>
						</div>
					</div>
					<div class="to1_body">
						<div class="to1_body_left">
							<div class="to1_body_left_top">
								论互联网的加班浪潮，对于零零七和九九六你有什么看法？省略一万字省略一万字省略一万字省略一万字省略一万字省略一万字省略一万字省略一万字省略一万字省略一万字
							</div>
							<div class="to1_body_left_bottom">
								某某描述年轻人可能会更多选择高薪省略一万字省略一万字省略一万字省略一万字
							</div>
						</div>
						<div class="to1_body_right"><img src="img/course2.png" ></div>
					</div>
				</div>
				<div class="to1">
					<div class="to1_header">
						<div class="to1_header_left">
							<figure>
								<span><img src="img/touxiang2.png" ></span>
								<h4>成功法则</h4>
							</figure>
						</div>
						
						<div class="to1_header_right">
							<figure>
								<h4>+ 关注</h4>
								<span></span>
							</figure>
						</div>
					</div>
					<div class="to1_body">
						<div class="to1_body_left">
							<div class="to1_body_left_top">
								怎么样才能月薪上万，走向成功，达到“睡后”收入实现不上班愿望？
							</div>
							<div class="to1_body_left_bottom">
								首先要学会理财，积攒第一笔启动资金才有有有有
							</div>
						</div>
						<div class="to1_body_right"><img src="img/course5.png" ></div>
					</div>
				</div>
				<div class="to3">
					<div class="to3_header">
						<div class="to3_header_left">
							<h2>名师</h2>
							<h4>TEATHER</h4>
						</div>
						<div class="to3_header_right"></div>
					</div>
					<div class="to3_body">
						<div class="to3_body_item">
							<div class="touxiang"><img src="img/touxiang11.png" ></div>
							<h1>TONYNI老师</h1>
							<p>某某机构创始人CEO</p>
							<span>已关注</span>
						</div>
						<div class="to3_body_item">
							<div class="touxiang"><img src="img/touxiang3.png" ></div>
							<h1>SEVEN 老师</h1>
							<p>某某机构创始人CEO</p>
							<span>已关注</span>
						</div>
						<div class="to3_body_item">
							<div class="touxiang"><img src="img/touxiang4.png" ></div>
							<h1>MISS LI 老师</h1>
							<p>某某机构创始人CEO</p>
							<span>已关注</span>
						</div>
						<div class="to3_body_item">
							<div class="touxiang"><img src="img/touxiang5.png" ></div>
							<h1>onmi 老师</h1>
							<p>某某机构创始人CEO</p>
							<span>已关注</span>
						</div>
					</div>
				</div>
				<div class="to1">
					<div class="to1_header">
						<div class="to1_header_left">
							<figure>
								<span><img src="img/touxiang11.png" ></span>
								<h4>攻城狮圈子</h4>
							</figure>
						</div>
						
						<div class="to1_header_right">
							<figure>
								<h4>+ 关注</h4>
								<span></span>
							</figure>
						</div>
					</div>
					<div class="to1_body">
						<div class="to1_body_left">
							<div class="to1_body_left_top">
								论互联网的加班浪潮，对于零零七和九九六你有什么看法？省略一万字省略一万字省略一万字省略一万字省略一万字省略一万字省略一万字省略一万字省略一万字省略一万字
							</div>
							<div class="to1_body_left_bottom">
								某某描述年轻人可能会更多选择高薪省略一万字省略一万字省略一万字省略一万字
							</div>
						</div>
						<div class="to1_body_right"><img src="img/course3.png" ></div>
					</div>
				</div>
				<div class="to1">
					<div class="to1_header">
						<div class="to1_header_left">
							<figure>
								<span><img src="img/touxiang11.png" ></span>
								<h4>攻城狮圈子</h4>
							</figure>
						</div>
						
						<div class="to1_header_right">
							<figure>
								<h4>+ 关注</h4>
								<span></span>
							</figure>
						</div>
					</div>
					<div class="to1_body">
						<div class="to1_body_left">
							<div class="to1_body_left_top">
								论互联网的加班浪潮，对于零零七和九九六你有什么看法？省略一万字省略一万字省略一万字省略一万字省略一万字省略一万字省略一万字省略一万字省略一万字省略一万字
							</div>
							<div class="to1_body_left_bottom">
								某某描述年轻人可能会更多选择高薪省略一万字省略一万字省略一万字省略一万字
							</div>
						</div>
						<div class="to1_body_right"><img src="img/course2.png" ></div>
					</div>
				</div>
			</div>
			</div>
		<div class="footer container">
			<ul>
				<li>
					<a href="../首页/index.html">
						<span>&#xe751;</span>
						<span>首页</span>
					</a>
				</li>
				<li>
					<a href="../课程/index.html">
						<span>&#xe614;</span>
						<span>课程</span>
					</a>
				</li>
				<li>
					<a href="../话题和关注/index.html">
						<span>
							&#xe630;
							</svg>
						</span>
						<span>话题</span>
					</a>
				</li>
				<li>
					<a href="../我的/index.html">
						<span>&#xe600;</span>
						<span>我的</span>
					</a>
				</li>
			</ul>
		</div>
	
	</body>
</html>
<script type="text/javascript">
	//1当前有一个边框，其余不变（排他思想）修改类名的方式
	//获取元素
	var table = document.querySelector('.table');
	var lis = table.querySelectorAll('li');
	var item = document.querySelectorAll('.item');
	var items = document.querySelectorAll('.items');
	//for循环绑定单击事件
	for (var i = 0; i < lis.length; i++) {
		//开始给5个小li设置索引号 
		lis[i].setAttribute('index', i);
		lis[i].onclick = function() {
			//干掉所有人，其余人的lii清除，class这个类
			for (var i = 0; i < lis.length; i++) {
				lis[i].className = '';
			}
			for (var i = 0; i < item.length; i++) {
				item[i].style.display = 'none'
				items[i].style.display = 'none'
			}
			//下面是显示的内容
			// 留下我自己
			var index = this.getAttribute('index');
			// this.className = 'current';
			item[index].style.display = 'block'
			items[index].style.display = 'block'
			console.log(index);
		}

	}
	//留下我自己
</script>
